<template>
  <var-loading type="circle" v-show="isLoading" />
<div class="login-container" v-show="!isLoading">
  <div class="video-box">
    <div class="spans">
      <p>Every word</p>
      <p>counts here</p>
      <p style="margin-top: 20px;font-weight: 400;font-size: 20px;">英语学习APP</p>
      <p style="margin-top: 10px;font-weight: 400;font-size: 20px;">记住单词，记录改变</p>
    </div>
    <div class="buttons">
        <var-button block type="success" class="buttons-login" @click="loginHandle">账号登录</var-button>
        <var-button block class="buttons-login" style="margin-top: 20px;" @click="registeHandle">账号注册</var-button>
    </div>
   <video class="video-background" 
          preload="auto" 
          loop playsinline
          autoplay 
          src="../assets/loginBackVideo.mp4" 
          tabindex="-1" 
          muted="muted">
        </video>
  </div>
</div>
</template>

<script lang='ts' setup>
import router from '@/router';
import { onBeforeMount,ref } from 'vue';

const loginHandle = () => {
  router.push("/loginForm");
}
const registeHandle = () => {
  router.push('/registe')
}

const isLoading = ref(true);

onBeforeMount(() => {
  isLoading.value = false;
})

</script>

<style scoped>
.login-container{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.video-box {
    position: relative;
    height: 100vh;
    background-color: #C1CFF7;
    /*进行视频裁剪*/
    overflow: hidden;
}

.video-box .video-background {
    position: absolute;
    left: 50%;
    top: 50%;
    /*保证视频内容始终居中*/
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /*保证视频充满屏幕*/
    object-fit: cover;
    min-height: 800px;
}
.spans{
  position: absolute;
  z-index: 100;
  color: #fff;
  font-size: 51px;
  margin-left: 10%;
  font-weight: 600;
  margin-top: 20%;
}

.buttons{
  position: absolute;
  top: 70%;
  height: 20%;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  left: 10%;
}
.buttons-login{
  border-radius: 20px;
  width: 80%;
  height: 50px;
}

/* 1、超小屏幕下 小于768 容器布局宽度为100% */
@media screen and (max-width: 767px) {

}

/* 小屏幕下 大于等于768 容器改为750px */
@media screen and (min-width: 768px) {

}

/* 3、中等屏幕下 992px  布局容器宽度为970px */
@media screen and (min-width: 992px) {
  .spans{
  position: absolute;
  z-index: 100;
  color: #fff;
  font-size: 80px;
  margin-left: 10%;
  font-weight: 600;
  margin-top: 10%;
}
}

/* 4、大屏幕下 大于等于1200  布局容器修改为1170 */
@media screen and (min-width: 1200px) {
  .spans{
  position: absolute;
  z-index: 100;
  color: #fff;
  font-size: 80px;
  margin-left: 10%;
  font-weight: 600;
  margin-top: 10%;
}
  .buttons{
    left: 35%;
  }
  .buttons-login{
    width: 30%;
  }
}
</style>